<template>
  <div id="app">
    <div id="main" style="width: 500px; height: 500px"></div>
    <div id="second" style="width: 500px; height: 500px"></div>
  </div>
</template>
<script>
// 交互逻辑
import axios from "axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      arr1: [],
      xz: [],
      sz: [],
    };
  },
  methods: {
    data() {
      axios.get("http://yishao.top/datashow/s1.json").then((res) => {
        console.log(res.data);
        this.arr1 = res.data;
        let dataMap = new Map();
        for (let index in this.arr1) {
          let jsObj = this.arr1[index];
          let provinceName = jsObj.provinceName;
          let finalTotalAmount = jsObj.finalTotalAmount;
          // 如果有对应省份的值就进行累计
          if (dataMap.has(provinceName)) {
            dataMap.set(
              provinceName,
              dataMap.get(provinceName) + finalTotalAmount
            );
          } else {
            dataMap.set(provinceName, finalTotalAmount);
          }
        }
        // 把映射转为数组
        // 通过sort进行排序，sort(a,b==>a-b)升序，，，如果是b-a表示降序，数组中第二个值进行降序排序==》b1-a1
        let mapArray = Array.from(dataMap)
          .sort((a, b) => b[1] - a[1])
          .slice(0, 5);
        console.log(mapArray);

        let xs = [];
        let ys = [];
        for (let [key, value] of mapArray) {
          xs.push(key); ///省份信息
          ys.push(value); ///存储对应的销售额
        }
        this.xs = xs;
        this.sz = ys;

        this.charts();
      });
    },
    charts() {
      let myChart = echarts.init(document.getElementById("main"));

      // 使用刚才指定的配置项和数据显示图表
      myChart.setOption({
        title: {
          text: "排名前五的销售额",
        },
        tooltip: {},
        xAxis: {
          data: this.xs,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: this.sz,
          },
        ],
      });
    },
    chart2() {
      axios.get("http://yishao.top/datashow/s4.json").then((res) => {
        console.log(res.data);
        // data: [
        // [10.0, 8.04],
        // [8.07, 6.95],]
        let dataMap = new Map();
        for (let index in res.data) {
          let jsObj = res.data[index];
          let year = jsObj.year;
          let num = jsObj.num;
          if (dataMap.has(year)) {
            dataMap.set(year, dataMap.get(year) + 1);
          } else {
            dataMap.set(year, 1);
          }
        }
        let dataArr = Array.from(dataMap); ///把映射转为数组类型
        let arr1 = [];
        for(let[key,value] of dataArr){
          let itemArr = [key,value];
          arr1.push(itemArr)
        }
        console.log(arr1);
        

        let myChart = echarts.init(document.getElementById("second"));
        
        
        myChart.setOption({
          title:{
            text:"散点图表示每年上架的数据变化",
            left:"center"
          },
          xAxis: {
            type:"value",
            scale:true
          },
          legend:{
            data:["上架的数量"],///一样要和系列中的name值一致
            x:"right",
            y:"top"
            

          },
          yAxis: {
            type:"value",
          },
          series: [
            {
              symbolSize: 20,
              name:"上架的数量",
              data: arr1,
              type: "scatter",
              itemStyle:{
                color:"red"
              }
            },
          ],
        });
      });
    },
  },
  created() {
    this.data();
    this.chart2();
  },
};
</script>

<style>
</style>
